<!--
 * @Description:页面默认行为
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 21:51:20
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>页面默认行为</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#div1 {
			width: 80px;
			/* height: 100px; */
			border: 1px solid black;
			background: #ccc;
			display: none;
			position: absolute;
		}
	</style>

</head>
<script>
	window.onload = function () {

		var odiv = document.getElementById('div1')
		document.oncontextmenu = (ev) => {
			var oEvent = ev || event

			// var odiv = document.getElementById('div1')
			console.log("菜单事件")
			odiv.style.display = 'block'
			odiv.style.left = oEvent.clientX + 'px'
			odiv.style.top = oEvent.clientY + 'px'
			return false; //阻止默认事件
		}
		odiv.onclick = (e) => {
			console.log("ppppp")
			e.stopPropagation()
			e.preventDefault();
			return false
		}


		document.onclick = function () {
			// var odiv = document.getElementById('div1')
			odiv.style.display = 'none'
		}

		// onkeydown = function (ev) {
		// 	var oTxt1 = document.getElementById('txt1')
		// 	var oTxt2 = document.getElementById('txt2')
		// 	oTxt1.onkeydown=function(ev){
		// 		var oEvent = ev || event
		// 		if(oEvent.keyCode==13&&oEvent.ctrlKey){
		// 			oTxt2.value+=oTxt1.value+'\n';
		// 			oTxt1.value='';
		// 		}else if(oEvent.keyCode==26){

		// 		}

		// 	}

		// }

	}
</script>

<body>
	oncontextmenu 菜单事件<br>
	<div id="div1">
		<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
			<li>ddd</li>
		</ul>
	</div>

</body>

</html>